<template>
     <div class="chartBox">
          <echartBox :isClear="true" :options="treeChartOptions" @getEchartsRef="getEchartsRef"></echartBox>
     </div>
</template>

<script setup lang="ts">
import echartBox from '@/baseUi/baseEcharts'
import { getTreeOption, blankOption } from '@/components/districtTreeChart/echartOptions'
import { GetDistrictStatistics } from '@/api/common'
import { onMounted, ref, computed } from 'vue'
let props = defineProps({
     type: {
          type: String,
          default: 'df_hazards',
     },
})
let $emit = defineEmits(['getDistrictData'])
onMounted(() => {
     getDistrictTreeData()
})

// 格式化数据
const formatData = (data: any[]): any[] => {
     return data.map((item) => ({
          label: item.Name,
          collapsed: false,
          total: item.Count,
          unit: item.Unit,
          children: item.SubDistricts ? formatData(item.SubDistricts) : [],
     }))
}

const findPathToNode = (tree: any[], targetLabel: string, currentPath: any[] = []): any[] | null => {
     for (const node of tree) {
          if (node.label === '') {
               continue // 跳过空标签的节点
          }
          const newPath = [...currentPath, node]
          if (node.label === targetLabel) {
               return newPath
          }
          if (node.children.length > 0) {
               const result = findPathToNode(node.children, targetLabel, newPath)
               if (result) {
                    return result
               }
          }
     }
     return null
}

// 树形图数据
const districtTreeList = ref<any[]>([])
const treeChartOptions = computed(() => {
     if (districtTreeList.value.length) {
          return getTreeOption(districtTreeList.value)
     } else {
          return blankOption
     }
})

const getDistrictTreeData = async () => {
     try {
          const { df_hazards, df_meeting, df_supervision } = await GetDistrictStatistics()
          if (props.type === 'df_hazards') {
               districtTreeList.value = formatData(df_hazards.SubDistricts)
          }
          if (props.type === 'df_meeting') {
               districtTreeList.value = formatData(df_meeting.SubDistricts)
          }
          if (props.type === 'df_supervision') {
               districtTreeList.value = formatData(df_supervision.SubDistricts)
          }
          console.log(districtTreeList.value)
     } catch (error) {
          console.log(error)
     }
}

const echartsRef = ref<any>(null)
const getEchartsRef = (echartsInstance: any) => {
     echartsRef.value = echartsInstance
     echartsRef.value.off('click').on('click', function (param: any) {
          const path = findPathToNode(districtTreeList.value, param.data.label)
          if (path) {
               console.log('路径上的所有节点数据:', path)
               let district = {
                    province: '',
                    city: '',
                    conty: '',
                    village: '',
               }
               path.forEach((node) => {
                    switch (node.unit) {
                         case '省':
                              district.province = node.label
                              break
                         case '市':
                              district.city = node.label
                              break
                         case '县':
                              district.conty = node.label
                              break
                         case '乡':
                              district.village = node.label
                              break
                         default:
                              break
                    }
               })
               console.log(district)
               $emit('getDistrictData', district)
          } else {
               console.log('未找到节点')
          }
     })
}
</script>

<style lang="scss" scoped>
.chartBox {
     height: 100%;
     width: 100%;
}
</style>
